<template>
<div>

    <lab_head />
    <lab_header />
    <div class="container layout layout-margin-top">

        <div class="row">
            <div class="col-md-9 layout-body">

                <div class="content">
                    <div class="row course-cates">
                        <div class="col-md-1 course-cates-title">类别：</div>
                        <div>

                        </div>

                        <!-- <div class="col-md-11 course-cates-content">
                        <a class="active" href="/courses/?course_type=all&amp;tag=all" @click="get_courses()">全部</a>
                        <a class="" href="/courses/?course_type=all&amp;tag=all&amp;fee=free" @click="get_category_courses(1)">免费</a>
                        <a class="" href="/courses/?course_type=all&amp;tag=all&amp;fee=limited" @click="get_category_courses(2)">限免</a>
                        <div class="course-cates-vip ">
                            <a target="_blank" href="/courses/?course_type=all&amp;tag=all&amp;fee=member"><img src="/static/img/vip-icon.png"></a>
                            <a class=""  @click="get_category_courses(3)">会员</a>
                        </div>
                    </div> -->

                        <div class="col-md-11 course-cates-content">

                            <a class="" href="javascript:;" @click="add_type('free','')">全部</a>
                            <a class="" href="javascript:;" @click="add_type('free','免费')">免费</a>
                            <a class="" href="javascript:;" @click="add_type('free','限免')">限免</a>
                            <div class="course-cates-vip ">
                                <a target="_blank"><img src="/static/img/vip-icon.png"></a>
                                <a class="" href="javascript:;" @click="add_type('free','会员')">会员</a>
                            </div>
                        </div>
                    </div>
                    <div class="row course-cates">
                        <div class="col-md-1 course-cates-title">标签：</div>
                        <div class="col-md-11 course-cates-content">

                            <a class="" href="javascript:;" @click="add_type('tag_id','')">全部</a>

                            <a v-for="(item,index) in tagslist" :key="index">
                                <a class="active" href="/courses/?course_type=all&amp;fee=all" @click= "change(item.id)">{{item.title}}{{item.id}}</a>

                                <!-- <a class="" href="javascript:;" @click="add_type('tag_id',item.id+'')">{{item.title}}</a> -->
                            </a>
                        </div>
                    </div>

                </div>
                <div class="content position-relative">

                    <!-- 
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active"><a href="/courses/?course_type=all&amp;tag=all&amp;fee=all" @click="get_kind_courses()">已上线</a></li>
                    <li class=""><a href="/courses/?status=preview" class="stat-event" data-stat="preview_course" @click="get_is_online('即将上线')">即将上线</a></li>
                    <li class="active"><a href="javascript:void(0);" @click="set_isonline(0)">全部</a></li>
                    <li class=""><a href="#"  @click="set_isonline(1)">已上线</a></li>
                    <li class=""><a href="javascript:void(0);" class="" data-stat="" @click="set_isonline(2)">即将上线</a></li>
                </ul>  -->

                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="javascript:void(0);" @click="add_type('online','')">全部</a></li>
                        <li class=""><a href="javascript:void(0);" @click="add_type('online','1')">已上线</a></li>
                        <li class=""><a href="javascript:void(0);" class="stat-event" data-stat="preview_course" @click="add_type('online','0')">即将上线</a></li>

                    </ul>
                    <div class="clearfix"></div>
                    <div class="courses-sort">
                        <a href="javascript:void(0);" @click="add_type('sort','')">最新</a>
                        /
                        <a href="javascript:void(0);" @click="add_type('sort','2')">最热</a>

                    </div>
                    <div class="search-result"></div>
                    <div class="row">

                        课程在这里展示
                        sss
                        <!-- <div >
                    item
                    {{item.title}}
                    
                </div> -->

                        <div class="col-md-4 col-sm-6  course" v-for="(item,index) in courselist" :key="index">

                            <router-link :to="{path:'/courses/course_show/',query:{id:item.id}}">
                                <div class="course-box">
                                    <div class="sign-box">
                                        <i class="fa fa-star-o course-follow pull-right" data-follow-url="/courses/63/follow" data-unfollow-url="/courses/63/unfollow" style="display:none"></i>
                                    </div>
                                    <div>

                                        <div class="course-img">
                                            <img :src="item.img" class="cover-image">
                                        </div>
                                        <div class="course-body">
                                            <span class="course-title" data-toggle="tooltip" data-placement="bottom">{{item.title}}</span>
                                        </div>
                                        <div class="course-footer">
                                            <span class="course-per-num pull-left">
                                                <i class="fa fa-users"></i>{{item.follows}}
                                            </span>
                                            <span class="course-money pull-right" style="background:#CFCFCF" v-if="item.category === '免费'">{{ item.category }}</span>
                                            <span class="course-money pull-right" style="background:#87CEEB" v-if="item.category === '限免'">{{ item.category }}</span>
                                            <span class="course-money pull-right" v-if="item.category === '会员'">{{ item.category }}</span>
                                            <span class="course-money pull-right" style="background:#FF6666" v-if="item.category === '训练营'">{{ item.category }}</span>
                                        </div>
                                    </div>

                                </div>
                            </router-link>
                        </div>

                    </div>
                </div>
                <table style="clear:both"></table>
                <nav class="pagination-container">
                    分页
                    <!-- heyui分页 -->
                    <div style="margin-left:650px">
                        <Pagination @change="change" v-model="pagination" layout="pager,jumper" small></Pagination>
                    </div>
                </nav>

            </div>
            <div class="col-md-3 layout-side">
               
                <user_info />
                <last_paths />
                <QR_code />

            </div>
        </div>
    </div>

    <lab_footer />

</div>
</template>

<script>
import lab_head from './common/lab_head';
import lab_header from './common/lab_header';
import lab_footer from './common/lab_footer';
import user_info from './common/user_info';
import last_paths from './common/last_paths';
import QR_code from './common/QR_code';
import {
    getcourses1_get,
    gettags_get
} from './axios_api/api';
// import {config,formatXml} from '../config.js';
export default {
    data() {
        return {
            course_tag: '',
            // 分页器变量
            pagination: {
                page: 1,
                size: 6,
                total: '',
                tid:'',
            },
            courselist: [],
            tagslist: [],
            tag: '',
            is_online: '',
            activetype: {
                free: '',
                tag_id: '',
                online: '',
                sort: '',
            },

        }
    },
    components: {
        lab_head,
        lab_header,
        lab_footer,
        user_info,
        last_paths,
        QR_code,
    },
    mounted: function () {

        // localStorage['activetype']=JSON.stringify({'free':'','tag_id':'','online':'','sort':''})

        this.get_tags();
        this.change()

    },

    methods: {
        // course_img(img){
        //     if(img == 'course.jpg'){
        //         return config['baseurl']+'static/upload/' + img
        //     }else{
        //         return config['qiniuurl'] + img
        //     }
        // },
        // add_type(type,value){
        //     this.activetype[type] = value
        //     localStorage['activetype']=JSON.stringify(this.activetype)
        //     this.get_courses();
        // },

        // 分页器展示数据
        change(id) {
            let tag_id=id
          
            console.log('为什么id不行',tag_id)
           

            var params = {
                page: this.pagination.page,
                page_size: this.pagination.size,
                course_tag:tag_id
            }
            getcourses1_get(params).then(resp => {
                console.log('分页器', resp)
                this.courselist = resp.results
                this.pagination.total = resp.count

            })
        },

        // //   获取所有课程
        // get_courses(id) {
        //     console.log('didid',id)
        //     var course_tag=id
        //     getcourses1_get(course_tag).then(resp => {
        //         console.log(resp)

        //         this.courselist = resp.results

        //         console.log('1111111111', this.courselist)

        //     })

        // },

        // 获取标签
        get_tags() {
            gettags_get().then(resp => {
                this.tagslist = resp.results
           

            })
        },
    }
}
</script>

<style>

</style>
